<template>
  <el-dialog v-model="dialogVisible" class="!border-rd-10px" title="批量下载征订码" width="60%">
    <!-- 搜索 -->
    <div class="screen flex mt-20px justify-between flex-items-end">
      <div class="flex w-100%">
        <el-row :gutter="8" style="width:90%">
          <el-col :span="8" class="mt-15px">
            <div class="form-cell flex flex-items-center">
              <span class="font-bold pr-10px">商品名称</span>
              <el-input v-model="formInline.code" class="cell-input" placeholder="请输入商品名称" clearable />
            </div>
          </el-col>
          <el-col :span="8" class="mt-15px">
            <div class="form-cell flex flex-items-center">
              <span class="font-bold pr-10px">商品分类</span>
              <el-select v-model="formInline.school" class="cell-input" clearable placeholder="输入商品分类">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </div>
          </el-col>
          <el-col :span="8" class="mt-15px">
            <div class="form-cell flex flex-items-center">
              <span class="font-bold pr-10px">上架状态</span>
              <el-select v-model="formInline.type" class="cell-input" clearable placeholder="全部">
                <el-option label="上架" :value="1" />
                <el-option label="下架" :value="2" />
              </el-select>
            </div>
          </el-col>
        </el-row>
      </div>
      <el-space>
        <el-button size="default" class="small-btn !border-rd-20px" color="#397dfd" plain>重置</el-button>
        <el-button size="default" class="small-btn !border-rd-20px !pl-50px !pr-50px" color="#397dfd" type="primary">
          查询
        </el-button>
      </el-space>
    </div>
    <!-- 页面 -->
    <div class="mt-40px pl-10px pr-10px pb-20px">
      <el-table
        ref="multipleTableRef"
        height="300"
        :data="tableData"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" />
        <el-table-column prop="name" label="征订公告" align="center" />
        <el-table-column prop="sex" align="征订类型" label="性别">
          <template #default="scope">{{ scope.row.sex === 1 ? '男' : '女' }}</template>
        </el-table-column>
        <el-table-column property="phone" align="center" label="征订状态" />
      </el-table>
      <div class="flex justify-center pt-60px">
        <el-pagination
          v-model:current-page="currentPage"
          :page-sizes="[10, 20, 30, 40]"
          background
          layout="sizes, prev, pager, next"
          :total="1000"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <template #footer>
      <div class="text-center">
        <el-button type="primary" plain @click="handleClose">取消</el-button>
        <el-button type="primary" @click="submitForm()">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import { reactive, ref } from 'vue'
const formInline = ref({
  code: '',
  school: '',
  type: '',
  status: ''
})
const dialogVisible = ref(false)
function show(val) {
  dialogVisible.value = val
}
function handleClose() {
  dialogVisible.value = false
}

interface User {
  name: string
  sex: string
  phone: string
}
const tableData: User[] = [
  {
    id:1,
    name: 'Tom',
    sex: 1,
    phone: '123456789'
  },
  {
    id:2,
    name: 'Tom',
    sex: 1,
    phone: '123456789'
  },
  {
    id:3,
    name: 'Tom',
    sex: 1,
    phone: '123456789'
  },
  {
    id:4,
    name: 'Tom',
    sex: 1,
    phone: '123456789'
  }
]
const multipleSelection = ref<User[]>([])
const handleSelectionChange = (val: User[]) => {
  multipleSelection.value = val
}
const currentPage = ref(5)
const handleSizeChange = (val: number) => {
}
const handleCurrentChange = (val: number) => {
}
const emits = defineEmits(['updateTable'])
const submitForm = () => {
  dialogVisible.value = false
  emits('updateTable', multipleSelection.value)
}
defineExpose({ show, dialogVisible })
</script>
<style scoped lang="scss">
.screen {
  :deep(.el-input__wrapper) {
    box-shadow: none !important;
    padding: 1px 8px !important;
    border-radius: 20px;
  }
  :deep(.el-select__wrapper) {
    box-shadow: none !important;
    padding: 8px !important;
    border-radius: 20px;
  }
}
</style>
